import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { NzMessageService, NzModalRef } from 'ng-zorro-antd';

@Component({
  selector: 'set-password',
  template: `
    <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="password">新密码</nz-form-label>
        <nz-form-control [nzSpan]="16" [nzValidateStatus]="validateForm.controls['password']">
          <input type="text" nz-input formControlName="password" placeholder="新密码" (ngModelChange)="validateConfirmPassword()">
          <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入新密码!</nz-form-explain>
          <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('maxlength')">不能超过20个字!</nz-form-explain>
          <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('minlength')">不能少于6个字!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="password_confirmation">确认新密码</nz-form-label>
        <nz-form-control [nzSpan]="16" [nzValidateStatus]="validateForm.controls['password_confirmation']">
          <input type="text" nz-input formControlName="password_confirmation" placeholder="确认新密码">
          <nz-form-explain *ngIf="getFormControl('password_confirmation').dirty&&getFormControl('password_confirmation').hasError('required')">请输入确认新密码!</nz-form-explain>
          <nz-form-explain *ngIf="getFormControl('password_confirmation').dirty&&getFormControl('password_confirmation').hasError('maxlength')">不能超过20个字!</nz-form-explain>
          <nz-form-explain *ngIf="getFormControl('password_confirmation').dirty&&getFormControl('password_confirmation').hasError('minlength')">不能少于6个字!</nz-form-explain>
          <nz-form-explain *ngIf="getFormControl('password_confirmation').dirty&&getFormControl('password_confirmation').hasError('confirm')">两次输入的密码不一致!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>



      <div nz-form-item nz-row>
        <div nz-col [nzOffset]="7" [nzSpan]="12" nz-form-control>
          <button nz-button [nzType]="'primary'" [disabled]="!validateForm.valid">确定</button>
          <button nz-button type="button" (click)="close()">取消</button>
        </div>
      </div>
    </form>
  `,
  styles: [`
    .ant-avatar-lg {
      width: 52px;
      height: 52px;
      line-height: 52px;
      border-radius: 26px;
      margin-left: 10px;
    }
  `],
})
export class SetPasswordComponent implements OnInit {

  id:any = 0;
  isLoading: boolean = false;
  validateForm: FormGroup;

  businessService:any;

  constructor(private fb: FormBuilder,
              private modal: NzModalRef,
              private _message: NzMessageService) {
  }

  ngOnInit() {
    this.validateForm = this.fb.group({
      password: ['tenlun123456', [Validators.required, Validators.minLength(6),Validators.maxLength(20)]],
      password_confirmation: ['tenlun123456', [this.passwordConfirmationValidator, Validators.minLength(6), Validators.maxLength(20)]],
    });
  }

  passwordConfirmationValidator = (control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else if (this.validateForm && control.value !== this.validateForm.controls['password'].value) {
      return { confirm: true, error: true };
    }
  };

  validateConfirmPassword() {
    setTimeout(_ => {
      this.validateForm.controls['password_confirmation'].updateValueAndValidity();
    });
  }

  _submitForm() {
    if (this.validateForm.invalid) {
      for (const i in this.validateForm.controls) {
        this.validateForm.controls[i].markAsDirty();
      }
    } else {
      this.isLoading = true;
      this.businessService.setPassword(this.id,this.validateForm.value).then((res) => {
        if (res.status.toString().startsWith('20')) {
          this.modal.close(true);
        } else {
          this._message.warning(res.message);
        }
        this.isLoading = false;
      }, error => {
        this._message.error(error.message ? error.message : error.error);
        this.isLoading = false;
      });
    }
  }

  getFormControl(name) {
    return this.validateForm.controls[name];
  }

  close() {
    this.modal.destroy();
  }
}
